<template>
    <el-card class="message-index" v-loading="loading">
        <header class="pb-4 font-bold flex items-center justify-between">
            <div>消息通知</div>
            <div>
                <el-button v-if="edit" type="danger" size="mini" @click="deleteAll">全部删除</el-button>
                <el-button :type="edit ? 'info' : 'primary'" size="mini" @click="edit = !edit">{{ edit ? '取消' : '编辑' }}</el-button>
            </div> 
        </header>
        <el-collapse v-model="activeNames" @change="handleChange" accordion>
            <template v-if="lists.length">
                <el-collapse-item :name="i" v-for="(v, i) in lists" :key="i" :class="activeNames == i && 'message-index__active'">
                    <template slot="title">
                        <div class="flex justify-between items-center">
                            <span :class="v.read ?  '' : 'font-bold' ">
                                <i class="message-index__circle rounded-full"></i>
                                <span class="mr-4">{{ v.createTime | formatDate('yy-mm-ss hh:mm:ss') }}</span>
                                {{ v.msg }}
                            </span>
                            <i class="el-icon-delete mr-4" v-show="edit" @click.stop="deleteMesg(v._id)"></i>
                        </div>
                    </template>

                    <div class="message-index__reason">
                        {{ v.msg }}
                    </div>
                </el-collapse-item>
            </template>

            <template v-else>
                <div class="py-4 text-grey text-xs">暂无消息通知</div>
            </template>
        </el-collapse>

        <div class="text-center" v-if="lists.length">
            <el-pagination
                @current-change="fetchData"
                layout="prev, pager, next"
                :current-page.sync="form.page"
                :page-size="form.pagesize"
                :total="total">
            </el-pagination>
        </div>
    </el-card>
</template>

<script>
    import {Collapse, CollapseItem, Pagination} from 'element-ui';

    export default {
        components: {
            ElCollapse: Collapse,
            ElCollapseItem: CollapseItem,
            ElPagination: Pagination
        },
        data() {
            return {
                lists: [],
                activeNames: '',
                form: {
                    page: 1,
                    pagesize: 10,
                    classification: 2
                },
                total: 0,
                loading: false,
                edit: false,
                mesgNum:''
            };
        },
        methods: {
            deleteAll(){
                Ele.$confirm('确认删除全部消息？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    API.delete('sys/notice/all')
                        .then(res => {
                            Ele.$message.success('删除成功');
                            this.edit = false;
                            this.fetchData();
                        })
                        .error(err => {
                            Ele.$message.error('删除失败， 请重试');
                        });
                }).catch(() => {
                    Ele.$message('取消删除');
                });
            },
            getMesgNum() {
                API.get('sys/notice/count').then(res => {
                    this.mesgNum = res.num;
                    bus.$emit('setMsgNum',res.num)
                })
            },
            setRead(id){
                return new Promise((resolve,reject)=>{
                    API.post('sys/notice/read',{'id':id})
                        .then(res =>{
                            console.log(res)
                            resolve(res)
                        })
                })
                 
            },
            handleChange(val) {
                
                if(val != null){
                    if(this.lists[val]&&this.lists[val].read == false){               
                        this.setRead(this.lists[val]._id).then(data=>{
                            if(data.ok == 1){
                                this.lists[val].read = true
                                this.getMesgNum()
                            }
                        })
                    }
                }
                    
            },
            fetchData() {
                this.loading = true;
                API.get('sys/notice', {params: this.form})
                    .then(res => {
                        if (this.form.page !== 1 && !res.rows.length) {
                            --this.form.page;
                            this.fetchData();
                        }

                        // const _list =  res.rows.map(item=>{
                        //     //item.read = false
                        //     return item
                        // })
                        
                        this.lists = res.rows;
                        this.total = res.total;
                    })
                    .finally(() => this.loading = false);
            },
            deleteMesg(id) {
                Ele.$confirm('确认删除消息？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    API.delete('sys/notice/' + id)
                        .then(res => {
                            Ele.$message.success('删除成功');
                            this.fetchData();
                        })
                        .error(err => {
                            Ele.$message.error('删除失败， 请重试');
                        });
                }).catch(() => {
                    Ele.$message('取消删除');
                });
            },
        },
        created() {
            this.fetchData();
        }
    };
</script>

<style lang="scss">
    .message-index {
        &__circle {
            width: 6px;
            height: 6px;
            margin-right: 24px;
            background: #d8d8d8;
            display: inline-block;
        }

        &__reason {
            padding-left: 30px;
        }

        &__active {
            .el-collapse-item__header,
            .el-collapse-item__wrap {
                background-color: #f6f6f6;
            }

            .el-collapse-item__content {
                padding-bottom: 10px;
            }
        }
    }
</style>
